<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./ThreeJs/WebGL.js"></script>
  <script src="./ThreeJs/js/three.js"></script>
  <script>
    // WebGL2兼容性检查
    if (WEBGL.isWebGL2Available() === false) {
      document.body.appendChild(WEBGL.getWebGL2ErrorMessage());
    }

    var scene = new THREE.Scene()
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    // 手动创建WebGL 2渲染上下文
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('webgl2', { alpha: false });
    var renderer = new THREE.WebGLRenderer({ canvas: canvas, context: context });

    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

    var geometry = new THREE.BoxGeometry(1, 1, 1)
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5

    // 渲染循环
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);

      // 旋转方块
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
    }
    animate()


  </script>
</body>

</html>